import React, {Component} from 'react';

import {
    View,
    Text,
    Image,
    StyleSheet,
    TouchableOpacity,
} from 'react-native';
import WebViews from "../pages/WebViews";
import HTMLView from 'react-native-htmlview'
import {THEMECOLOR} from "../config/main";

export default class TrendingCell extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: this.props.data
        }

    }

    render() {
        let description = '<p>' + this.state.data.description + '</p>';
        let built = this.state.data.contributors ? (
            this.state.data.contributors.map((result, i, arr) => {
                return <Image
                    key={i}
                    style={{width: 22, height: 22, margin: 2}}
                    source={{uri: arr[i]}}
                />
            })
        ) : null;
        return (
            <TouchableOpacity onPress={() => {
                this.props.navigator.push({
                    component: WebViews,
                    params   : {
                        url  : `http://github.com/` + this.state.data.url,
                        title: this.state.data.full_name,
                        ...this.props
                    }
                })
            }}>
                <View style={styles.cell_container}>
                    <Text style={styles.title}>{this.state.data.fullName}</Text>
                    <HTMLView
                        value={description}
                        onLinkPress={(url) => {
                        }}
                        stylesheet={{
                            p: styles.description,
                            a: styles.description,
                        }}
                    />
                    <Text style={[styles.description, {fontSize: 14}]}>
                        {this.state.data.meta}
                    </Text>
                    <View style={styles.row}>
                        <View style={{flexDirection: 'row', alignItems: 'center'}}>
                            <Text style={styles.author}>Built by </Text>
                            {built}
                        </View>
                        <Image
                            ref='favoriteIcon'
                            style={[{width: 22, height: 22}]}
                            source={require('../../res/images/ic_unstar_transparent.png')}/>
                    </View>


                </View>
            </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({
    container     : {
        flex: 1,

    },
    row           : {
        justifyContent: 'space-between',
        flexDirection : 'row',
        alignItems    : 'center',
    },
    title         : {
        fontSize    : 16,
        marginBottom: 2,
        color       : '#212121',
        flex        : 1
    },
    description   : {
        fontSize    : 14,
        marginBottom: 2,
        color       : '#757575'
    },
    cell_container: {
        backgroundColor: 'white',
        padding        : 10,
        marginLeft     : 5,
        marginRight    : 5,
        marginVertical : 3,
        borderColor    : '#dddddd',
        borderWidth    : 0.5,
        borderRadius   : 2,
        shadowColor    : 'gray',
        shadowOffset   : {width: 0.5, height: 0.5},
        shadowOpacity  : 0.4,
        shadowRadius   : 1,
        elevation      : 2
    },
    author        : {
        fontSize    : 14,
        marginBottom: 2,
        color       : '#757575'
    },
})